<template>
  <div>
    <Form :model="searchForm" class="search-form" inline ref="searchForm">
      <div>
        <FormItem class="process-type" prop="type">
          <Input placeholder="流程审批种类" search v-model="searchForm.type" />
        </FormItem>
        <FormItem>
          <Button @click="handleResetSearchForm" class="reset-btn">重置</Button>
          <Button @click="handleSearchClick" type="primary">查询</Button>
        </FormItem>
      </div>
      <FormItem>
        <Button @click="handleAddProcessClick" type="primary">新增默认审批</Button>
      </FormItem>
    </Form>

    <Table
      :columns="processColumns"
      :data="processList"
      :loading="processLoading"
      border
      ref="processTable"
      stripe
    >
      <template slot="action" slot-scope="{ row, index }">
        <Button @click="handleProcessEditClick(row.id)" size="small" type="primary">查看</Button>
        <Button
          @click="handleProcessEditClick(row.id)"
          size="small"
          style="margin: 0 5px;"
          type="info"
        >编辑</Button>
        <Button @click="handleProcessDelClick(row.id)" size="small" type="error">删除</Button>
      </template>
    </Table>
    <div class="page-wrapper">
      <Page
        :page-size="pageSize"
        :total="total"
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange"
        show-sizer
        show-total
      />
    </div>
  </div>
</template>
<script>
import { getFlowTabelList, delProcessFlow } from '@/api/message.js';
import { DefautlProcessFlowStatus } from '@/config/cfg';

export default {
  data () {
    return {
      searchForm: {
        type: ''
      },

      // 分页
      total: 100,
      pageNum: 1,
      pageSize: 10,

      // 流程表单数据
      processColumns: [
        {
          type: 'selection',
          width: 55,
          align: 'center'
        },
        {
          title: '审批编号',
          //   slot: 'flownum',
          key: 'flownum',
          width: 100,
          align: 'center'
        },
        {
          title: '审批种类',
          key: 'remake',
          align: 'center'
        },
        {
          title: '合同段',
          key: 'treename',
          align: 'center'
        },
        {
          title: '状态',
          key: 'status_text',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 200,
          align: 'center'
        }
      ],
      processList: [],
      processLoading: true
    };
  },
  mounted () {
    this.getDefaultProcessList();
  },
  methods: {
    // 获取默认审批流程
    async getDefaultProcessList () {
      try {
        const data = {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        };

        if (this.searchForm.type) {
          data.remake = this.searchForm.type;
        }
        // console.log('默认审批流程 req=>', data);
        const resp = await getFlowTabelList(data);
        // console.log('默认审批流程 res=>', resp);
        this.processLoading = false;
        const info = resp.data.data;
        this.total = info.total;
        this.processList = info.list;

        this.processList.forEach(item => {
          item.status_text = DefautlProcessFlowStatus.toString(item.status);
        });
      } catch (error) {
        console.error(error);
      }
    },
    // 页码切换
    pageChange (page) {
      this.pageNum = page;
      this.getDefaultProcessList();
    },
    // 页条数切换
    pageSizeChange (size) {
      this.pageSize = size;
      this.getDefaultProcessList();
    },
    handleResetSearchForm () {
      this.$refs.searchForm.resetFields();
    },
    handleSearchClick () {
      this.getDefaultProcessList();
    },
    async handleProcessEditClick (id) {
      this.$router.push({ path: 'approval_process/detail', query: { id: id } });
    },

    handleAddProcessClick () {
      this.$router.push('approval_process/detail');
    },
    // 删除审批item
    handleProcessDelClick (id) {
      this.$Modal.confirm({
        title: '确认删除？',
        content: '<p>数据删除后不可恢复，请确认是否删除数据？</p>',
        loading: true,
        onOk: async () => {
          // console.log('删除节点 req=>', id);
          const resp = await delProcessFlow(id);
          // console.log('删除节点 res=>', resp);
          this.getDefaultProcessList();
          this.$Modal.remove();
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
.search-form {
  display: flex;
  justify-content: space-between;
  .process-type {
    margin-right: 60px;
  }
  .reset-btn {
    margin-right: 10px;
  }
  > .ivu-form-item:last-child {
    margin-right: 0;
  }
}
.page-wrapper {
  .ivu-page {
    float: right;
    margin: 10px 0;
  }
}
</style>
